<!--
 * @Author: yangfeixiang 842931716@qq.com
 * @Date: 2022-09-28 09:21:38
 * @LastEditors: yangfeixiang 842931716@qq.com
 * @LastEditTime: 2022-10-12 09:58:46
 * @FilePath: \wework\wework\src\pages\wework\marketingplan\personalSop.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bady-sty">
    <div>
      <el-button type="primary" @click="addapi()">创建SOP</el-button>
      <span style="float: right">
        <el-input
          v-model="form.name"
          class="w-50 m-2"
          placeholder="搜索SOP名称"
          :suffix-icon="Search"
          style="width: 200px;"
          @keyup.enter.native="userSopListapi()"
        />
      </span>
    </div>
    <div style="margin-top: 15px;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="规则名称" width="180" />
        
        <el-table-column prop="satff_name" label="使用成员" />
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column prop="address" label="开关" >
          <template #default="scope">
            <el-switch v-model="scope.row.status"  active-value="1" inactive-value="0" @click="userSopOpenapi(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" >
          <template #default="scope">
            <div style="color: #409EFF; cursor:pointer; ">
              <span @click="details(scope.row)">详情</span>
              <span style="margin: 0 10px;" @click="datas(scope.row)">数据</span>
              <span @click="addapi(scope.row)">编辑</span>
            </div>
            
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px;float: right;">
        <el-pagination
          v-model:currentPage="form.page"
          v-model:page-size="form.size"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-drawer
    v-model="detailsshow"
    size="50%"
    title="详情"
    :direction="direction"
    :before-close="handleClose"
  >
    <div>
      <div class="title-left-blue">
        使用场景
      </div>
      <div style="margin-top: 15px;color:#8D8D8D">
        <span>使用场景：</span>
        <span v-if="itemdata.scene_type == 1">激活新客户</span>
        <span v-if="itemdata.scene_type == 5">客户关怀</span>
        <span v-if="itemdata.scene_type == 6">节日营销</span>
      </div>
      <div style="margin-top: 15px;color:#8D8D8D">
        <span>使用成员：</span>
        <span>
          <el-tag v-for="item in itemdata.staffid" style="margin: 3px;"><el-icon><UserFilled /></el-icon>{{item.name}}</el-tag>
        </span>
      </div>
      <div style="margin-top: 15px;color:#8D8D8D">
        <span>过滤条件：</span>
        <span>
          <el-button size="small">{{itemdata.filter_status == 0 ? '关闭' :'开启'}}</el-button>
           <el-tag v-if="itemdata.filter_status == 1" v-for="item in itemdata.filter_tag
" style="margin: 3px;">{{item.tag_name}}</el-tag>
        </span>
      
      </div>
    </div>
    <div class="title-left-blue">
        时间设置
      </div>
      <div style="margin-top: 15px;">
        <el-button size="small">{{itemdata.start_type == 1 ? '立即开始' :'定时开始'}}</el-button>
        <el-tag v-if="itemdata.start_type == 2" style="margin: 3px;">{{itemdata.start_date}}</el-tag>
      </div>
      <div class="title-left-blue">
        内容及推送规则
      </div>
      <el-timeline style="margin-top:16px">
    <el-timeline-item
      v-for="(activity, index) in itemdata.rule_data"
      size="large"
      placement="top"
      :key="index"
      :icon="Clock"
      :timestamp="activity.timestamp"
    >

     <el-card style="padding-bottom:20px">

        <div style="float: left;margin-top: 0px;">
                <div style="background-color: #FCFDFF;padding: 15px;">
                  <div style="color:#9B9996">共{{activity.send_content.content.length + 1}}条内容：</div>
                  <div style="margin-top: 15px;" >
                    <span style="font-weight: 600;">内容1：</span>
                    <span>{{activity.send_content.text}}</span>
                  </div>
                  <div style="margin-top: 15px;" v-for="(act,idx) in activity.send_content.content" :key="idx">
                    <span style="font-weight: 600;">内容{{idx+2}}：</span>
                    <span>{{act.title}}</span>
                  </div>
                </div>
                <el-button size="small">{{activity.trigger_form == 1 ? '一键群发' :activity.trigger_form == 2?'任务下发':'纯提醒'}}</el-button>

                
            </div>
      </el-card>

    </el-timeline-item>
  </el-timeline>


  </el-drawer>
  </div>
</template>
<script setup>
  import { ref,defineExpose,reactive } from "vue";
import { Calendar, Search } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { userSopList,userSopOpen,userSopDetail } from '@/api'
const router = useRouter()
const detailsshow =ref(false)
const total =ref(0)
const itemdata=ref()
const form = reactive({
  page:1,
  size:10,
  name:'',
})
const details = (item)=>{
  userSopDetail({id:item.id}).then(res=>{
    itemdata.value=res.data
    detailsshow.value=true
  })
  
}
const addapi = (row)=>{
  if(row){
    router.push({ path: 'addpersonal',query: {id:row.id} })
  }else{
    router.push({ path: 'addpersonal'})
  }
  
}
const datas = (val)=>{
  router.push({ path: 'executiondata',query: {id:val.id} })
}
const value1 = ref(true)
const tableData = ref()
const userSopListapi=()=>{
  userSopList(form).then(res=>{
    tableData.value=res.data.item
    total.value=res.data.count
    for(var i = 0;i<tableData.value.length;i++){
      tableData.value[i].status=tableData.value[i].status + ''
    }
  })
}
const userSopOpenapi=(item)=>{
  console.log(item)
  userSopOpen({id:item.id,status:item.status}).then(res=>{
    ElMessage({
      message: res.msg,
      type: 'success',
    })
    userSopListapi()
  })
}
const handleSizeChange = (val)=>{
  form.size=val
  userSopListapi()
}
const handleCurrentChange = (val)=>{
  form.page=val
  userSopListapi()
}
userSopListapi()
</script>
<style>
.el-card__body{
    margin-top: -14px;
}
  .title-left-blue{
    border-left: 3px solid #409EFF;
    color: #1A1A1A;
    padding-left: 10px;
    margin-top: 20px;
    font-weight: 600;
  }
.bady-sty{
  margin: 15px;
  padding: 15px;
  background-color: #fff;
}
</style>